<template>
  <div class="certification" ref="certification">
    <div class="certification_part">
      <h6>请上传营业执照<span>(最大支持5M)</span></h6>
      <!-- TODO 小程序上传营业执照 -->
      <SmallUploadImg ref="smallUploadImg" :isUploadSfz="isUploadSfz" :sfzBg="yyzzBg" :maxLength="maxLength"></SmallUploadImg>
    </div>
    <div class="certification_part">
      <div class="certification_part_item">
        <span class="important">企业收款名称</span>
        <input type="text" placeholder="请输入收款名称" v-model="certificationData.enterprise_name" @blur="scroll0" />
      </div>
      <div class="certification_part_item">
        <span class="important">企业账户</span>
        <input type="text" placeholder="请输入企业收款银行卡号" v-model="certificationData.enterprise_account" @blur="scroll0" />
      </div>
      <div class="certification_part_item">
        <span class="important">企业开户银行</span>
        <select name="bank_id" class="select" v-model="certificationData.bank_id">
          <option value="0" selected>请选择</option>
          <option
            v-for="(val,key,index) in bankList"
            :key="index"
            :value="key"
          >{{val}}</option>
        </select>
      </div>
      <div class="certification_part_item">
        <span class="important">企业开户行</span>
        <input type="text" placeholder="请输入账户的开户网点" v-model="certificationData.enterprise_bank" @blur="scroll0" />
      </div>
      <div class="certification_part_item">
        <span>备注</span>
        <input type="text" placeholder="请填写备注" v-model="certificationData.remarks" @blur="scroll0" />
      </div>
    </div>
    <div class="certification_btn">
      <span class="btn finish" @click="clickCertification">提交认证</span>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import Storage from '@/utils/store.js'
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)

// 上传
import { uploadImgs } from '@/api/community/article'
import SmallUploadImg from '@/components/SmallUploadImg'
import { addEnterpriseAudit, editEnterpriseAudit } from '@/api/user/member/memberApi'
export default Vue.extend({
  components: {
    SmallUploadImg
  },
  props: {},
  data() {
    return {
      isUploadSfz: true,
      yyzzBg: 'https://img.wifenxiao.com/h5-wfx/images/user/enterpriseUrl.png',
      maxLength: 1,
      // 企业认证数据
      certificationData: {
        enterprise_id: '',
        enterprise_url: '',
        enterprise_name: '',
        enterprise_account: '',
        bank_id: 0,
        enterprise_bank: '',
        remarks: ''
      },
      // 银行列表
      bankList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.getEnterpriseAccount()
    })
  },
  methods: {
    scroll0() {
      window.scroll(0, 0)
      this.$refs.certification.scroll(0, 0)
    },
    // 获取企业信息
    getEnterpriseAccount() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      editEnterpriseAudit().then(res => {
        this.$loadingWrap.close()
        const enterpriseInfo = res.data.enterprise_info
        if (res.status == 1) {
          this.bankList = res.data.bank_list
          this.certificationData.enterprise_id = enterpriseInfo.enterprise_id || ''
          this.certificationData.enterprise_url = enterpriseInfo.enterprise_url || ''
          // TODO 小程序数据处理
            this.yyzzBg = this.certificationData.enterprise_url
          this.certificationData.enterprise_name = enterpriseInfo.enterprise_name || ''
          this.certificationData.enterprise_account = enterpriseInfo.enterprise_account || ''
          this.certificationData.bank_id = enterpriseInfo.bank_id || 0
          this.certificationData.enterprise_bank = enterpriseInfo.enterprise_bank || ''
          this.certificationData.remarks = enterpriseInfo.remarks || ''
        }
        //  else {
        //   this.$Error(res.msg)
        // }
      })
    },
    // 上传营业执照
    uploadIdCard(file) {
      const form = new FormData()
      form.append('file', file)
      uploadImgs(form).then(res => {
        const picUrl = res.data.pic_url
        if (res.status === 1) {
          this.certificationData.enterprise_url = picUrl
        } else {
          this.$Error('上传失败, 请重新上传')
        }
      }).catch(() => {
        this.$Error('上传失败, 请重新上传')
      })
    },
    enterpriseUrlChange() {
      const enterpriseInputDOM = this.$refs.input_enterprise
      // 通过DOM取文件数据
      const uploadFile = enterpriseInputDOM.files[0]
      this.uploadIdCard(uploadFile)
    },
    clickCertification() {
      // TODO 小程序处理
        this.$refs.smallUploadImg.imgList.length ? this.certificationData.enterprise_url = this.$refs.smallUploadImg.imgList[0] : ''
      if (this.certificationData.enterprise_url == '') {
        this.$Error('请上传营业执照！')
        return false
      } else if (this.certificationData.enterprise_name == '') {
        this.$Error('请输入收款名称！')
        return false
      } else if (this.certificationData.enterprise_account == '') {
        this.$Error('请输入企业收款银行卡号！')
        return false
      } else if (this.certificationData.enterprise_bank == '') {
        this.$Error('请输入账户的开户网点！')
        return false
      } else {
        Dialog.confirm({
          title: '提交认证',
          message: '请确认填写内容无误，提交后将进入审核阶段，审核通过即可申请提现',
          className: 'common-confirm',
          closeOnClickOverlay: true
        })
          .then(() => {
            this.$loadingWrap.show()
            setTimeout(() => {
              this.$loadingWrap.close()
            }, 10000)
            const sendData = {
              enterprise_id: this.certificationData.enterprise_id || '',
              enterprise_url: this.certificationData.enterprise_url,
              enterprise_name: this.certificationData.enterprise_name,
              enterprise_account: this.certificationData.enterprise_account,
              bank_id: this.certificationData.bank_id,
              enterprise_bank: this.certificationData.enterprise_bank,
              remarks: this.certificationData.remarks
            }
            addEnterpriseAudit(sendData).then(res => {
              this.$loadingWrap.close()
              if (res.status == 1) {
                  window.location.href = '/certification-reviewing'
              } else {
                this.$Error(res.msg)
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  }
})
</script>

<style lang="scss">
.miniprogram-root {
  .van-dialog__message {
    line-height: 40px;
  }
  .samll-upload {
    &-box {
      justify-content: center;
    }
  }
}
.certification{
  position: relative;
  padding: 25px;
  overflow: hidden;
  &_part{
    width: 100%;
    padding: 30px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 20px;
    &:last-child{
      margin-bottom: 0;
    }
    h6 {
      position: relative;
      font-size: 28px;
      color: #1a1a1a;
      margin-bottom: 30px;
      padding-left: 18px;
      &::before{
        content: '*';
        color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
      >span{
        font-size: 24px;
        color: #999;
      }
    }
    // 上传营业执照
    .businessLicense_upload{
      position: relative;
      width: 480px;
      height: 270px;
      margin: 0 auto;
      background: url('https://img.wifenxiao.com/h5-wfx/images/user/enterpriseUrl.png') no-repeat center/cover;
      .upload_image{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 10;
      }
      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius:0px 0px 10px 10px;
        z-index: 9;
      }
      .add-text{
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 24px;
        color: #fff;
        width: 100%;
        height: 58px;
        line-height: 58px;
        text-align: center;
        background-color: rgba(0,0,0,.4);
        border-radius:0px 0px 10px 10px;
        z-index: 11;
      }
    }
    &_item{
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
      padding: 30px 0;
      border-bottom: 1px solid #eee;
      &:first-child{
        padding-top: 0;
      }
      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
      span {
        position: relative;
        flex: 3;
        font-size: 28px;
        color: #333;
        padding-left: 18px;
        &.important::before{
          content: '*';
          color: red;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      input,.select {
        flex: 7;
        font-size: 28px;
        color: #333;
        height: 36px;
        line-height: 36px;
        text-align: right;
        border: none;
      }
      .select {
        direction: rtl;
        padding-right: 40px;
      }
    }
  }
  &_btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98px;
    font-size: 32px;
    color: #fff;
    text-align: center;
    background-color: #fff;
    span {
      display: block;
      width: 700px;
      height: 76px;
      line-height: 76px;
      margin: 11px auto;
      background-color: #dbdbdb;
      border-radius: 76px;
      background: linear-gradient(to right,#FE1B49, #E90104);
    }
  }
}
</style>
